<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">查询表格</div></template>
        <template #content>
          <div class="demo-content">表格查询的复杂示例。</div>
        </template>
    </PageHeader>
    
    <Row style="margin:20px;" :gutter="10">
        <Card class="card-list" style="width:100%">
            <div style="margin-bottom:10px;">
                <Button type="primary" icon="md-add">新建</Button>
                <div class="ivu-inline-block ivu-fr">
                    <Dropdown trigger="click">
                    <Tooltip content="密度" placement="top">
                        <Icon type="md-list" size="16"></Icon>
                    </Tooltip>
                    <template #list>
                        <DropdownMenu>
                            <DropdownItem>默认</DropdownItem>
                            <DropdownItem>宽松</DropdownItem>
                            <DropdownItem>紧凑</DropdownItem>
                        </DropdownMenu>
                    </template>
                    </Dropdown>
                    <Tooltip content="全屏" placement="top" style="margin-left:10px;">
                    <Icon type="md-expand" size="16"></Icon>
                    </Tooltip>
                    <Tooltip content="刷新" placement="top" style="margin-left:10px;">
                    <Icon type="ios-refresh" size="18"/>
                    </Tooltip>
                    <Dropdown trigger="click" style="margin-left:10px;">
                    <Tooltip content="列设置" placement="top">
                        <Icon type="md-options" size="16"></Icon>
                    </Tooltip>
                    <template #list>
                        <DropdownMenu>
                            <DropdownItem>规则名称</DropdownItem>
                            <DropdownItem>描述</DropdownItem>
                            <DropdownItem>状态</DropdownItem>
                        </DropdownMenu>
                    </template>
                    </Dropdown>
                </div>
            </div>
            <Alert show-icon>已选择 <a>{{selectData.length}}</a> 项 服务调用次数总计 <CountUp :end="total" ref="count"/> 万 <a @click="selectAllCancel">清空</a></Alert>
            <Table :columns="columns" :data="data" style="margin-top:10px;" @on-select="selectChange" @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel">
                <template #frequency="{ row }">
                    {{ row.frequency }}万
                </template>
                <template #status="{ row }">
                    <Badge v-if="row.status=='2'" status="success" text="已上线" />
                    <Badge v-else-if="row.status=='3'" status="error" text="异常" />
                    <Badge v-else-if="row.status=='0'" status="default" text="关闭" />
                    <Badge v-else-if="row.status=='1'" status="processing" text="运行中" />
                    <Badge v-else status="warning" text="警告" />
                </template>
                <template #action="{ row, index }">
                    <Button type="text" size="small" style="margin-right: 5px"><a>编辑</a></Button>
                    <Button type="text" size="small"><a>订阅警报</a></Button>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page :total="100" show-sizer />
            </div>
        </Card>
    </Row>
    
  </div>
</template>

<script>
export default {
    data () {
        return {
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '规则名称',
                    key: 'name',
                    minWidth: 200,
                    align: 'left'
                },
                {
                    title: '描述',
                    key: 'desc',
                    minWidth: 400,
                    align: 'left'
                },
                {
                    title: '服务调用次数',
                    slot: 'frequency',
                    minWidth: 155,
                    align: 'right'
                },
                {
                    title: '状态',
                    slot: 'status',
                    minWidth: 200,
                    align: 'left'
                },
                {
                    title: '上次调度时间',
                    key: 'time',
                    minWidth: 200,
                    align: 'left'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 200,
                    align: 'center'
                }
            ],
            data: [
                {name:'1',desc:'这是一段描述',frequency:1344,status:'1',time:'2022-07-09 09:00:04'},
                {name:'2',desc:'这是一段描述',frequency:654,status:'0',time:'2022-07-09 09:00:04'},
                {name:'3',desc:'这是一段描述',frequency:457,status:'0',time:'2022-07-09 09:00:04'},
                {name:'4',desc:'这是一段描述',frequency:8,status:'0',time:'2022-07-09 09:00:04'},
                {name:'5',desc:'这是一段描述',frequency:65,status:'2',time:'2022-07-09 09:00:04'},
                {name:'6',desc:'这是一段描述',frequency:124,status:'0',time:'2022-07-09 09:00:04'},
                {name:'7',desc:'这是一段描述',frequency:3542,status:'3',time:'2022-07-09 09:00:04'},
                {name:'8',desc:'这是一段描述',frequency:985,status:'1',time:'2022-07-09 09:00:04'}
            ],
            selectData:[],
            total:0,
        }
    },
    methods: {
        selectAllCancel(){
            this.data.forEach(element => {
                element._checked = false;
            });
            this.total = 0;
            this.selectData = [];
        },
        selectAll(data){
            this.selectData = data;
            this.total = 0;
            data.forEach(element => {
                this.total = this.total + element.frequency
            });
        },
        selectChange(data){
            this.selectData = data;
            this.total = 0;
            data.forEach(element => {
                this.total = this.total + element.frequency
            });
        },
    }
}
</script>
